<template>
	<view class="content">
		<!-- <view class="cu-form-group">
			<view class="title">记录类型</view>
			<picker @change="pickerType"  :value="typeSelect" range-key="dictLabel" :range="visitType">
				<view class="picker">
					{{typeSelect>-1?visitType[typeSelect].dictLabel:'请选择记录类型'}}
				</view>
			</picker>
		</view> -->
		<!-- <view class="cu-form-group">
			<view class="title">联系人</view>
			<picker @change="contactPickerType" :value="contactSelect" range-key="name"  :range="contacts">
				<view class="picker">
					{{contactSelect>-1?contacts[contactSelect].name:'请选择联系人'}}
				</view>
			</picker>
			 
		</view> -->
		<!-- <view class="cu-form-group">
			<view class="title">下次联系时间</view>
			<picker mode="date" :value="nextDate" start="2020-01-01" end="2060-12-31" @change="DateChange">
				<view class="picker">
					{{nextDate}}
				</view>
			</picker>
		</view> -->
		<view class="floow-cont">
			<view class="title">跟进内容</view>
			<textarea maxlength="-1" @input="textareaBInput" placeholder="请填写跟进记录内容"></textarea>
		</view>
		<!-- <view class="cu-bar bg-white">
			<view class="action">
				图片
			</view>
			<view class="action">
				{{imgList.length}}/4
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="previewImage" :data-url="imgList[index]">
				 <image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index" :data-type="1">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage(1)" v-if="imgList.length<4">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view> -->
		<!-- <view class="cu-bar bg-white">
			<view class="action">
				附件
			</view>
			<view class="action">
				{{encList.length}}/4
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in encList" :key="index" @tap="previewImage" :data-url="encList[index]">
				 <image :src="encList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index" :data-type="2">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage(2)" v-if="encList.length<4">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view> -->
		<view class="btn-box">
			<view class="submit-btn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('../../../js_sdk/map/qqmap-wx-jssdk.js');
	var qqmapsdk;

	import api from '@/api/api.js';
	export default {
		data() {
			return {
				contacts:[],
				visitType:[],
				contactSelect: -1, // 当前选中的记录类型
				typeSelect: -1, // 当前选中的记录类型			
				nextDate: '2021-3-25',
				content: '', // 跟进内容
				imgList: [], // 跟进图片
				photos:[],
				customerUserId:undefined,
				customerId:undefined,
				lng:undefined,
				lat:undefined,
				address:"",
			}
		},
		onLoad(options) {
			qqmapsdk = new QQMapWX({
			            key: 'LVHBZ-MDPCS-FFMOV-6QCXU-EG355-2LBOQ'
			});
			// 修改顶部导航背景色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#39b54a',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.customerId=options.customerId;
			this.customerUserId=options.customerUserId;
			var dicts = uni.getStorageSync('dicts');
			dicts=JSON.parse(dicts);
			this.visitType=dicts['customerVisitType'];
			let date = new Date();
			this.nextDate=this.utils.dateFormat("YYYY-mm-dd", date);
			
			//获取位置
			var that=this;
			// uni.getLocation({
			// 	type: 'gcj02',//腾讯地图使用gcj02获取位置坐标
			// 	success: function (res) {
			// 		that.lng=res.longitude;
			// 		that.lat=res.latitude;
			// 	},
			// })
			//https://blog.csdn.net/a18792627168/article/details/108962311
			uni.getLocation({
			    type: 'wgs84',
				geocode:true,
			    success: function (res) {
					that.lat=res.latitude;
					that.lng=res.longitude;
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success: res => {
							console.log(res.result.address)
							that.address  = res.result.address;
						}
					});
					 
			    }
			});
		},
		onShow() {
			this.getCustomerContactsList();
		},
		methods: {
			getCustomerContactsList(){
				var data = {customerId:this.customerId};
				var that=this;
				api.getCustomerContactsList(data).then(
					res => {
						if(res.code==200){
							 that.contacts=res.data;
							 if(that.contacts!=null&&that.contacts.length>0){
								 that.contractSelect=0;
							 }
							 else{
								 that.contractSelect=-1;
							 }
							 
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
							 
						}
					},
					rej => {}
				);
			},
			contactPickerType(e) {
				console.log(e.detail.value)
				this.contactSelect = e.detail.value
			},
			// 记录类型选择
			pickerType(e) {
				this.typeSelect = e.detail.value
			},
			// 下次联系时间选择
			DateChange(e) {
				this.nextDate = e.detail.value
			},
			// 跟进内容填写
			textareaBInput(e) {
				this.content = e.detail.value
			},
			// 选择图片
			ChooseImage(type) {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						 
						uni.uploadFile({
							url: uni.getStorageSync('requestPath')+'/app/common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'  // 上传附带参数
							},
							success: (uploadFileRes) => {
								// 根据接口具体返回格式   赋值具体对应url
								if (this.imgList.length != 0) {
									this.imgList = this.imgList.concat(res.tempFilePaths)
								} else {
									this.imgList = res.tempFilePaths
									
								}
								this.photos = this.photos.concat(JSON.parse(uploadFileRes.data).fileName)
							}
						});
					}
				});
			},
			// 图片预览
			previewImage(){
				var imgArr = [];
				this.photos.forEach(function(element) {
				   imgArr.push(uni.getStorageSync('requestPath')+element);
				});
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			// 删除跟进图片
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1);
							this.photos.splice(e.currentTarget.dataset.index, 1);
						}
					}
				})
			},
			submit(){
				if (this.utils.isEmpty(this.content)) {
					uni.showToast({
						title: "请输入跟进内容",
						icon: 'none',
					});
					return
				}
				// if (this.typeSelect==-1) {
				// 	uni.showToast({
				// 		title: "请选择记录类型",
				// 		icon: 'none',
				// 	});
				// 	return
				// }
				// if (this.contactSelect==-1) {
				// 	uni.showToast({
				// 		title: "请选择联系人",
				// 		icon: 'none',
				// 	});
				// 	return
				// }
				// var photosStr="";
				// this.photos.forEach(function(element) {
				//    photosStr+=element+",";
				// });
				// if(photosStr!=""){
				// 	photosStr=photosStr.substr(0,photosStr.length-1);
				// }
				var data={
					customerUserId:this.customerUserId,
					customerId:this.customerId,
					// visitType:this.visitType[this.typeSelect].dictValue,
					content:this.content,
					// photos:photosStr,
					// contactsIds:this.contacts[this.contactSelect].contactsId,
					// nextTime:this.nextDate,
					// lng:this.lng,
					// lat:this.lat,
					// address:this.address,
				};
				console.log(data);
				api.addCustomerVisit(data).then(
					res => {
						if(res.code==200){
							uni.showToast({
								title: '提交成功',
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack({
								  success: () => {
								  }
								})
							}, 500);
						}
						else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
						}
						
					},
					rej => {}
				);
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		margin-top: 20upx;
		.floow-cont{
			flex-direction: column;
			background-color: #ffffff;
			padding: 1rpx 30rpx;
			margin-top: 20upx;
			.title{
				text-align: justify;
				padding-right: 30upx;
				font-size: 30upx;
				position: relative;
				height: 60upx;
				line-height: 60upx;
			}
			textarea{
				width: 100%;
				height: 200upx;
				padding: 20upx 0;
			}
		}
	}
	.btn-box{
		padding: 20upx 24upx;
		.submit-btn{
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			font-size: 28upx;
			color: #fff;
			border-radius: 8upx;
			background: #39b54a;
		}
	}
</style>
